/** Visualisation CSS */
.fullscreen {
    width: 100%;
    height: 100%;
}

/*
.drag {
    cursor: url('visualize/drag.png'), all-scroll;
}

.information {
    cursor: url('visualize/information.png'), help;
}

.selection {
    cursor: url('visualize/selection.png'), crosshair;
}
*/

/** Visualisation settings */
#visualisation-settings {
    max-width: 90%;
    float: left; 
}
      
.settings {
    display: inline-block;
}  

.settings div {
    display: inline-block;
}     

.space {
    font-size: 0.7em;
    padding-left: 5px;
    padding-right: 5px;   
    padding-top: 3px;  
}

.middle {
   vertical-align: middle; 
}

.dotted-link {
    border-bottom: dotted 1px #6A7C99;
}
  
.mouse-icon {
    cursor: pointer;
    padding: 2px;
}
.mouse-icon.selected {
    background: #d5d5d5;
}

.colorblock {
    cursor: pointer;
    display: inline-block;
    width: 10px;
    height: 10px;
    border: 1px solid black; 
}

.settings select:hover {
    cursor: pointer;
}

.number-input { 
    cursor: text;
    text-align: center;
}
.number-input.small {
     max-width: 40px;
}
.number-input.medium {
    max-width: 50px;
}

.explanation {
    color: #444;
    font-size: 8px !important;
}

/** Visualisation menu */
#visualisation-menu {
    max-width: 150px;
    position: absolute;
    right: 5px;
}

.menu-items {
    padding: 0px;
    margin: 0px;
    list-style-type: none; 
}
.menu-items.level2 .menu-item {
    text-align: left;
    display: none;
}
 
.menu-item {  
    display: block;
    list-style-type: none;                                   
}
.menu-item:hover {
    cursor: pointer;  
}
.menu-item.padding {
    padding: 3px;
}

.menu-item a:hover {
    text-decoration: underline;
}

.menu-button {
    text-align: right;
    list-style-type: none;
    background: #ddd;
    padding: 3px;
    border: 1px solid #ccc;
    border-radius: 4px;
}
.menu-button:hover .menu-item {
    display: block;                                             
}





/** SVG */
#d3svg {
    border-top: 1px dashed black;
}

/** Record hover */
g:hover {
    /*cursor: pointer;*/
}

/** Lines between records */
.link {
    fill: none;    
    stroke-opacity: .6;  
}

.link:hover {
    /*cursor: pointer;*/
}

/** Circle around icon */
circle.around {
    stroke-width: 1px;
    stroke: #ddd;
    stroke-opacity: .25;
}

circle.foreground {
    fill: #fff;
}

circle.selected {
    fill: #00ff00 !important;
    /*fill: #1687E7 !important;*/
}

/** Text above circle */
text.center {
    font-weight: bold;
    text-anchor: middle;   
}

text.bold {
    font-weight: bold;
}

text.shadow {
    stroke: #fff;
    stroke-width: 2px;
    stroke-opacity: .8;
}

/** Overlay */
.overlay:hover {   
    cursor: default;
    pointer-events: none;
}                 

.semi-transparant {
    fill: #fff;
    fill-opacity: 0.95;
    stroke: #000;
    stroke-width: 1.5;
    stroke-opacity: 1.0;
}

.close-button {
    fill: #fff;
    stroke: #000;
    stroke-width: 1.5; 
    pointer-events: all; 
    cursor: pointer;
}

.close-text {
    fill: #000;
    /*font-size: 20px;*/
    font-weight: bold;
}

/** Selection */
#selection {
    fill: #fff;
    fill-opacity: 0.3;
    stroke: #000;
    stroke-dasharray: 5,5;
    stroke-width: 1.5;
}